import React, { PureComponent, useState } from "react";
const ThemeContext = React.createContext()
const { Provider, Consumer } = ThemeContext
class Child extends PureComponent {
  render() {
    console.log(this);
    return (
      <Consumer>{
        (ctx) => {
          return (
            <div style={ctx}>
              <h3>子组件</h3>
            </div>
          )

        }
      }
      </Consumer>
    )
  }
}
// Child.contextType = ThemeContext
function Parent(props) {
  return (
    <div>
      <h2>父</h2>
      <Child></Child>
    </div>
  )
}

function ThemeToggle({ theme, onChange }) {
  let change = (e) => {
    let key = e.target.name;
    let val = e.target.value;
    onChange({ ...theme, [key]: val })
  }
  return (
    <>
      <div>
        前景色: <input type="color" name="color" value={theme.color} onChange={change} />
        背景色: <input type="color" name="background" value={theme.background} onChange={change} />
      </div>
    </>
  )
}
function PageA() {
  let obj = { a: 1 }
  const [theme, setTheme] = useState({ color: "#000000", background: "#ffffff" })
  let change = (key, e) => {
    setTheme({ ...theme, [key]: e.target.value })
  }
  return (
    <Provider value={theme}>
      <div>
        <h1>页面</h1>
        <hr />
        <Parent></Parent>
        <ThemeToggle theme={theme} onChange={(e) => setTheme(e)}></ThemeToggle>
      </div>

    </Provider>

  )
}
export default PageA